<template>
    <div>
        <el-row v-if="isSignUp==false" type="flex" justify="space-around">
            <el-col :span="24">
                <el-card shadow>
                    <div slot="header">
                        <span class="panel-title">
                            {{ $t('m.SignUpInfoTitle') }} <i class="el-icon-edit"></i>
                        </span>
                    </div>
                    <el-form
                        :model="signUpForm"
                        ref="signUpForm"
                        label-width="100px"
                        :rules=rules+memberNum
                    >
                    <p id="teamInfo">{{$t('m.TeamInfo')}}</p>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="teamName" :label="$t('m.TeamName')" required>
                                <el-input
                                    v-model="signUpForm.teamName"
                                    prefix-icon="el-icon-s-flag"
                                    :placeholder="$t('m.TeamName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="englishTeamName" :label="$t('m.EnglishTeamName')" required>
                                <el-input
                                    v-model="signUpForm.englishTeamName"
                                    :placeholder="$t('m.EnglishTeamName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="school" :label="$t('m.School')">
                                <el-input
                                    v-model="signUpForm.school"
                                    :placeholder="$t('m.School')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="Star" :label="$t('m.IsStar')">
                                <el-radio v-model="signUpForm.star" label="0">{{$t('m.Official')}}</el-radio>
                                <el-radio v-model="signUpForm.star" label="1">{{$t('m.Star')}}</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <p id="teamInfo">{{$t('m.MemberInfo')}}
                        <el-button type="primary" size="small" plain  @click="addMember()">
                            {{$t('m.AddMember')}}</el-button>
                        <el-button type="primary" size="small" plain v-show="memberNum>1"  @click="subMember()">
                            {{$t('m.SubMember')}}</el-button>
                    </p>
                    <el-row>
                      <p id="memberInfo">{{$t('m.MemberOne')}}</p>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="teammatesName1" :label="$t('m.TeammatesName')" required>
                                <el-input
                                    v-model="signUpForm.teammatesName1"
                                    :placeholder="$t('m.TeammatesName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="studentClass1" :label="$t('m.StudentClass')" required>
                                <el-input
                                    v-model="signUpForm.studentClass1"
                                    :placeholder="$t('m.StudentClass')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="studentId1" :label="$t('m.StudentId')" required>
                                <el-input
                                    v-model="signUpForm.studentId1"
                                    :placeholder="$t('m.StudentId')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="5">
                            <el-form-item prop="nickname1" :label="$t('m.StudentNickName')">
                                <el-input
                                    v-model="signUpForm.nickname1"
                                    :placeholder="$t('m.StudentNickName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="usersName1" :label="$t('m.UsersName')" required>
                                <el-input
                                    v-model="signUpForm.usersName1"
                                    :placeholder="$t('m.UsersName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="phoneNumber1" :label="$t('m.PhoneNumber')" required>
                                <el-input
                                    v-model="signUpForm.phoneNumber1"
                                    :placeholder="$t('m.PhoneNumber')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="size1" :label="$t('m.Size')" required>
                                <el-input
                                    v-model="signUpForm.size1"
                                    :placeholder="$t('m.Size')+'S/M/L'"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="gender1" :label="$t('m.Gender')" required>
                                <el-radio v-model="signUpForm.gender1" label="1">{{$t('m.Female')}}</el-radio>
                                <el-radio v-model="signUpForm.gender1" label="0">{{$t('m.Male')}}</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="memberNum>1">
                        <p id="memberInfo">{{$t('m.MemberTwo')}}</p>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="teammatesName2" :label="$t('m.TeammatesName')" required>
                                <el-input
                                    v-model="signUpForm.teammatesName2"
                                    :placeholder="$t('m.TeammatesName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="studentClass2" :label="$t('m.StudentClass')" required>
                                <el-input
                                    v-model="signUpForm.studentClass2"
                                    :placeholder="$t('m.StudentClass')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="studentId2" :label="$t('m.StudentId')" required>
                                <el-input
                                    v-model="signUpForm.studentId2"
                                    :placeholder="$t('m.StudentId')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="5">
                            <el-form-item prop="nickname2" :label="$t('m.StudentNickName')" >
                                <el-input
                                    v-model="signUpForm.nickname2"
                                    :placeholder="$t('m.StudentNickName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="usersName2" :label="$t('m.UsersName')" required>
                                <el-input
                                    v-model="signUpForm.usersName2"
                                    :placeholder="$t('m.UsersName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="phoneNumber2" :label="$t('m.PhoneNumber')" required>
                                <el-input
                                    v-model="signUpForm.phoneNumber2"
                                    :placeholder="$t('m.PhoneNumber')"
                                    width="70%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="size2" :label="$t('m.Size')" required>
                                <el-input
                                    v-model="signUpForm.size2"
                                    :placeholder="$t('m.Size')+'S/M/L'"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="gender2" :label="$t('m.Gender')" required>
                                <el-radio v-model="signUpForm.gender2" label="1">{{$t('m.Female')}}</el-radio>
                                <el-radio v-model="signUpForm.gender2" label="0">{{$t('m.Male')}}</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="memberNum===3">
                        <p id="memberInfo">{{$t('m.MemberThree')}}</p>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="teammatesName3" :label="$t('m.TeammatesName')" required>
                                <el-input
                                    v-model="signUpForm.teammatesName3"
                                    :placeholder="$t('m.TeammatesName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="studentClass3" :label="$t('m.StudentClass')" required>
                                <el-input
                                    v-model="signUpForm.studentClass3"
                                    :placeholder="$t('m.StudentClass')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="studentId3" :label="$t('m.StudentId')" required>
                                <el-input
                                    v-model="signUpForm.studentId3"
                                    :placeholder="$t('m.StudentId')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="5">
                            <el-form-item prop="nickname3" :label="$t('m.StudentNickName')">
                                <el-input
                                    v-model="signUpForm.nickname3"
                                    :placeholder="$t('m.StudentNickName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="usersName3" :label="$t('m.UsersName')" required>
                                <el-input
                                    v-model="signUpForm.usersName3"
                                    :placeholder="$t('m.UsersName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="phoneNumber3" :label="$t('m.PhoneNumber')" required>
                                <el-input
                                    v-model="signUpForm.phoneNumber3"
                                    :placeholder="$t('m.PhoneNumber')"
                                    width="70%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="size3" :label="$t('m.Size')" required>
                                <el-input
                                    v-model="signUpForm.size3"
                                    :placeholder="$t('m.Size')+'S/M/L'"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="gender3" :label="$t('m.Gender')" required>
                                <el-radio v-model="signUpForm.gender3" label="1">{{$t('m.Female')}}</el-radio>
                                <el-radio v-model="signUpForm.gender3" label="0">{{$t('m.Male')}}</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    </el-form>
                    <el-row>
                        <el-col :span="24" style="text-align: center;"> 
                            <el-button  style="width: 20rem;"
                                type="primary"
                                :loading="btnSignUpLoading"
                                @click="handleSignUp()"
                            >{{ $t('m.Sign_Up_Btn') }}</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <el-row v-if="isSignUp==true" type="flex" justify="space-around">
            <el-col :span="24">
                <el-card shadow>
                    <div slot="header">
                        <span class="panel-title">
                            {{ $t('m.SignUpInfo_Modify') }} <i class="el-icon-edit"></i>
                        </span>
                    </div>
                    <el-form
                        :model="signUpForm"
                        ref="signUpForm"
                        label-width="100px"
                        :rules=rules+memberNum
                    >
                    <p id="teamInfo">{{$t('m.TeamInfo')}} 
                        <el-tag :type="SIGN_UP_STATUS_REVERSE[signStatus]['type']"
                            size="medium"  effect="plain">
                            {{ $t('m.' + SIGN_UP_STATUS_REVERSE[signStatus]['name']) }}
                        </el-tag>
                    </p>
                    <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="teamName" :label="$t('m.TeamName')" required>
                                <el-input
                                    v-model="signUpForm.teamName"
                                    prefix-icon="el-icon-s-flag"
                                    :placeholder="$t('m.TeamName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="englishTeamName" :label="$t('m.EnglishTeamName')" required>
                                <el-input
                                    v-model="signUpForm.englishTeamName"
                                    :placeholder="$t('m.EnglishTeamName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="school" :label="$t('m.School')">
                                <el-input
                                    v-model="signUpForm.school"
                                    :placeholder="$t('m.School')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="Star" :label="$t('m.IsStar')">
                                <el-radio v-model="signUpForm.star" label="0">{{$t('m.Official')}}</el-radio>
                                <el-radio v-model="signUpForm.star" label="1">{{$t('m.Star')}}</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <p id="teamInfo">{{$t('m.MemberInfo')}}
                        <el-button type="primary" size="small" plain  @click="addMember()">
                            {{$t('m.AddMember')}}</el-button>
                        <el-button type="primary" size="small" plain v-show="memberNum>1"  @click="subMember()">
                            {{$t('m.SubMember')}}</el-button>
                    </p>
                    <el-row>
                      <p id="memberInfo">{{$t('m.MemberOne')}}</p>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="teammatesName1" :label="$t('m.TeammatesName')" required>
                                <el-input
                                    v-model="signUpForm.teammatesName1"
                                    :placeholder="$t('m.TeammatesName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="studentClass1" :label="$t('m.StudentClass')" required>
                                <el-input
                                    v-model="signUpForm.studentClass1"
                                    :placeholder="$t('m.StudentClass')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="studentId1" :label="$t('m.StudentId')" required>
                                <el-input
                                    v-model="signUpForm.studentId1"
                                    :placeholder="$t('m.StudentId')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="5">
                            <el-form-item prop="nickname1" :label="$t('m.StudentNickName')">
                                <el-input
                                    v-model="signUpForm.nickname1"
                                    :placeholder="$t('m.StudentNickName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="usersName1" :label="$t('m.UsersName')" required>
                                <el-input
                                    v-model="signUpForm.usersName1"
                                    :placeholder="$t('m.UsersName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="phoneNumber1" :label="$t('m.PhoneNumber')" required>
                                <el-input
                                    v-model="signUpForm.phoneNumber1"
                                    :placeholder="$t('m.PhoneNumber')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="size1" :label="$t('m.Size')" required>
                                <el-input
                                    v-model="signUpForm.size1"
                                    :placeholder="$t('m.Size')+'S/M/L'"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="gender1" :label="$t('m.Gender')" required>
                                <el-radio v-model="signUpForm.gender1" label="1">{{$t('m.Female')}}</el-radio>
                                <el-radio v-model="signUpForm.gender1" label="0">{{$t('m.Male')}}</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="memberNum>1">
                        <p id="memberInfo">{{$t('m.MemberTwo')}}</p>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="teammatesName2" :label="$t('m.TeammatesName')" required>
                                <el-input
                                    v-model="signUpForm.teammatesName2"
                                    :placeholder="$t('m.TeammatesName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="studentClass2" :label="$t('m.StudentClass')" required>
                                <el-input
                                    v-model="signUpForm.studentClass2"
                                    :placeholder="$t('m.StudentClass')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="studentId2" :label="$t('m.StudentId')" required>
                                <el-input
                                    v-model="signUpForm.studentId2"
                                    :placeholder="$t('m.StudentId')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="5">
                            <el-form-item prop="nickname2" :label="$t('m.StudentNickName')" >
                                <el-input
                                    v-model="signUpForm.nickname2"
                                    :placeholder="$t('m.StudentNickName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="usersName2" :label="$t('m.UsersName')" required>
                                <el-input
                                    v-model="signUpForm.usersName2"
                                    :placeholder="$t('m.UsersName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="phoneNumber2" :label="$t('m.PhoneNumber')" required>
                                <el-input
                                    v-model="signUpForm.phoneNumber2"
                                    :placeholder="$t('m.PhoneNumber')"
                                    width="70%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="size2" :label="$t('m.Size')" required>
                                <el-input
                                    v-model="signUpForm.size2"
                                    :placeholder="$t('m.Size')+'S/M/L'"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="gender2" :label="$t('m.Gender')" required>
                                <el-radio v-model="signUpForm.gender2" label="1">{{$t('m.Female')}}</el-radio>
                                <el-radio v-model="signUpForm.gender2" label="0">{{$t('m.Male')}}</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="memberNum===3">
                        <p id="memberInfo">{{$t('m.MemberThree')}}</p>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="teammatesName3" :label="$t('m.TeammatesName')" required>
                                <el-input
                                    v-model="signUpForm.teammatesName3"
                                    :placeholder="$t('m.TeammatesName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="studentClass3" :label="$t('m.StudentClass')" required>
                                <el-input
                                    v-model="signUpForm.studentClass3"
                                    :placeholder="$t('m.StudentClass')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="studentId3" :label="$t('m.StudentId')" required>
                                <el-input
                                    v-model="signUpForm.studentId3"
                                    :placeholder="$t('m.StudentId')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="5">
                            <el-form-item prop="nickname3" :label="$t('m.StudentNickName')">
                                <el-input
                                    v-model="signUpForm.nickname3"
                                    :placeholder="$t('m.StudentNickName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="usersName3" :label="$t('m.UsersName')" required>
                                <el-input
                                    v-model="signUpForm.usersName3"
                                    :placeholder="$t('m.UsersName')"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="phoneNumber3" :label="$t('m.PhoneNumber')" required>
                                <el-input
                                    v-model="signUpForm.phoneNumber3"
                                    :placeholder="$t('m.PhoneNumber')"
                                    width="70%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="size3" :label="$t('m.Size')" required>
                                <el-input
                                    v-model="signUpForm.size3"
                                    :placeholder="$t('m.Size')+'S/M/L'"
                                    width="100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="6">
                            <el-form-item prop="gender3" :label="$t('m.Gender')" required>
                                <el-radio v-model="signUpForm.gender3" label="1">{{$t('m.Female')}}</el-radio>
                                <el-radio v-model="signUpForm.gender3" label="0">{{$t('m.Male')}}</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    </el-form>
                    <el-row>
                        <el-col :span="24" style="text-align: center;"> 
                            <el-button  style="width: 20rem;"
                                type="primary"
                                :loading="btnSignUpLoading"
                                @click="handleModifySignUp()"
                            >{{ $t('m.Sign_Up_Modify_Btn') }}</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>

        <el-dialog
        :title= null
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
        <h2>{{ $t('m.Sign_up_Modify_Dialog_Title') }}</h2>
        <div><h4><span style="color:tomato">*</span>{{ $t('m.Sign_up_Modify_Dialog_Info') }}</h4></div><br>
        <div>
            <el-input
            type="textarea"
            v-model="modifyMark"
            :placeholder="$t('m.Sign_up_Modify_Dialog_Input')"
            width="100%"
            maxlength="30"
            show-word-limit
        ></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="acModifyApply()">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
import api from '@/common/api';
import mMessage from '@/common/message';
import storage from "@/common/storage";
import {
  SIGN_UP_STATUS_REVERSE,
} from '@/common/constants';
export default {
  data() {
    return {
        isSignUp:false,
        signStatus:'',
        teamId:'',
        SIGN_UP_STATUS_REVERSE:{},
        signUpContestId:this.$route.params.signUpID,
        btnSignUpLoading:false,
        memberNum:1,
        maxParticipants:1,
        dialogVisible: false,
        signUpForm:{
            // 队伍信息
            teamName:'', 
            englishTeamName:'',
            star:1,
            school:'西南科技大学',
            // 队员一
            teammatesName1:'',
            studentClass1:'',
            studentId1:'',
            nickname1:'',
            usersName1:'',
            phoneNumber1:'',
            size1:'',
            gender1:'',
            // 队员二
            teammatesName2:'',
            studentClass2:'',
            studentId2:'',
            nickname2:'',
            usersName2:'',
            phoneNumber2:'',
            size2:'',
            gender2:'',
            // 队员三
            teammatesName3:'',
            studentClass3:'',
            studentId3:'',
            nickname3:'',
            usersName3:'',
            phoneNumber3:'',
            size3:'',
            gender3:'',
        },
        modifyMark:'',
        teammatesName:'',
        studentClass:'',
        studentId:'',
        nickname:'',
        usersName:'',
        phoneNumber:'',
        size:'',
        gender:'',
        rules1:{
            teamName:[
                { required: true, message: this.$i18n.t('m.TeamName_Check_Required'), trigger: 'blur' },
                { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
            ],
            englishTeamName:[
                { required: true, message: this.$i18n.t('m.English_TeamName_Check_Required'), trigger: 'blur' },
                { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
            ],
            teammatesName1:[
                { required: true, message: this.$i18n.t('m.TeammatesName_Check_Required'), trigger: 'blur' },
            ],
            studentClass1:[
                { required: true, message: this.$i18n.t('m.StudentClass_Check_Required'), trigger: 'blur' },
            ],
            studentId1:[
                { required: true, message: this.$i18n.t('m.StudentId_Check_Required'), trigger: 'blur' },
            ],
            usersName1:[
                { required: true, message: this.$i18n.t('m.UsersName_Check_Required'), trigger: 'blur' },
            ],
            phoneNumber1:[
                { required: true, message: this.$i18n.t('m.PhoneNumber_Check_Required'), trigger: 'blur' },
            ],
            size1:[
                { required: true, message: this.$i18n.t('m.Size_Check_Required'), trigger: 'blur' },
            ],
            gender1:[
                { required: true, message: this.$i18n.t('m.Gender_Check_Required'), trigger: 'blur' },
            ],
        },
        rules2:{
            teamName:[
                { required: true, message: this.$i18n.t('m.TeamName_Check_Required'), trigger: 'blur' },
                { min: 1, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
            ],
            englishTeamName:[
                { required: true, message: this.$i18n.t('m.English_TeamName_Check_Required'), trigger: 'blur' },
                { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
            ],
            teammatesName1:[
                { required: true, message: this.$i18n.t('m.TeammatesName_Check_Required'), trigger: 'blur' },
            ],
            studentClass1:[
                { required: true, message: this.$i18n.t('m.StudentClass_Check_Required'), trigger: 'blur' },
            ],
            studentId1:[
                { required: true, message: this.$i18n.t('m.StudentId_Check_Required'), trigger: 'blur' },
            ],
            usersName1:[
                { required: true, message: this.$i18n.t('m.UsersName_Check_Required'), trigger: 'blur' },
            ],
            phoneNumber1:[
                { required: true, message: this.$i18n.t('m.PhoneNumber_Check_Required'), trigger: 'blur' },
            ],
            size1:[
                { required: true, message: this.$i18n.t('m.Size_Check_Required'), trigger: 'blur' },
            ],
            gender1:[
                { required: true, message: this.$i18n.t('m.Gender_Check_Required'), trigger: 'blur' },
            ],
            teammatesName2:[
                { required: true, message: this.$i18n.t('m.TeammatesName_Check_Required'), trigger: 'blur' },
            ],
            studentClass2:[
                { required: true, message: this.$i18n.t('m.StudentClass_Check_Required'), trigger: 'blur' },
            ],
            studentId2:[
                { required: true, message: this.$i18n.t('m.StudentId_Check_Required'), trigger: 'blur' },
            ],
            usersName2:[
                { required: true, message: this.$i18n.t('m.UsersName_Check_Required'), trigger: 'blur' },
            ],
            phoneNumber2:[
                { required: true, message: this.$i18n.t('m.PhoneNumber_Check_Required'), trigger: 'blur' },
            ],
            size2:[
                { required: true, message: this.$i18n.t('m.Size_Check_Required'), trigger: 'blur' },
            ],
            gender2:[
                { required: true, message: this.$i18n.t('m.Gender_Check_Required'), trigger: 'blur' },
            ],
        },
        rules3:{
            teamName:[
                { required: true, message: this.$i18n.t('m.TeamName_Check_Required'), trigger: 'blur' },
                { min: 1, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
            ],
            englishTeamName:[
                { required: true, message: this.$i18n.t('m.English_TeamName_Check_Required'), trigger: 'blur' },
                { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
            ],
            teammatesName1:[
                { required: true, message: this.$i18n.t('m.TeammatesName_Check_Required'), trigger: 'blur' },
            ],
            studentClass1:[
                { required: true, message: this.$i18n.t('m.StudentClass_Check_Required'), trigger: 'blur' },
            ],
            studentId1:[
                { required: true, message: this.$i18n.t('m.StudentId_Check_Required'), trigger: 'blur' },
            ],
            usersName1:[
                { required: true, message: this.$i18n.t('m.UsersName_Check_Required'), trigger: 'blur' },
            ],
            phoneNumber1:[
                { required: true, message: this.$i18n.t('m.PhoneNumber_Check_Required'), trigger: 'blur' },
            ],
            size1:[
                { required: true, message: this.$i18n.t('m.Size_Check_Required'), trigger: 'blur' },
            ],
            gender1:[
                { required: true, message: this.$i18n.t('m.Gender_Check_Required'), trigger: 'blur' },
            ],
            teammatesName2:[
                { required: true, message: this.$i18n.t('m.TeammatesName_Check_Required'), trigger: 'blur' },
            ],
            studentClass2:[
                { required: true, message: this.$i18n.t('m.StudentClass_Check_Required'), trigger: 'blur' },
            ],
            studentId2:[
                { required: true, message: this.$i18n.t('m.StudentId_Check_Required'), trigger: 'blur' },
            ],
            usersName2:[
                { required: true, message: this.$i18n.t('m.UsersName_Check_Required'), trigger: 'blur' },
            ],
            phoneNumber2:[
                { required: true, message: this.$i18n.t('m.PhoneNumber_Check_Required'), trigger: 'blur' },
            ],
            size2:[
                { required: true, message: this.$i18n.t('m.Size_Check_Required'), trigger: 'blur' },
            ],
            gender2:[
                { required: true, message: this.$i18n.t('m.Gender_Check_Required'), trigger: 'blur' },
            ],
            teammatesName3:[
                { required: true, message: this.$i18n.t('m.TeammatesName_Check_Required'), trigger: 'blur' },
            ],
            studentClass3:[
                { required: true, message: this.$i18n.t('m.StudentClass_Check_Required'), trigger: 'blur' },
            ],
            studentId3:[
                { required: true, message: this.$i18n.t('m.StudentId_Check_Required'), trigger: 'blur' },
            ],
            usersName3:[
                { required: true, message: this.$i18n.t('m.UsersName_Check_Required'), trigger: 'blur' },
            ],
            phoneNumber3:[
                { required: true, message: this.$i18n.t('m.PhoneNumber_Check_Required'), trigger: 'blur' },
            ],
            size3:[
                { required: true, message: this.$i18n.t('m.Size_Check_Required'), trigger: 'blur' },
            ],
            gender3:[
                { required: true, message: this.$i18n.t('m.Gender_Check_Required'), trigger: 'blur' },
            ],
        }
    }
  },
  methods:{
    handleSignUp() {
        this.teammatesName = this.signUpForm.teammatesName1 + '-' + 
                            (this.signUpForm.teammatesName2 == '' ?'*':this.signUpForm.teammatesName2) + '-' + 
                            (this.signUpForm.teammatesName3 == '' ?'*':this.signUpForm.teammatesName3)
        this.studentClass = this.signUpForm.studentClass1 + '-' + 
                            (this.signUpForm.studentClass2 == '' ?'*':this.signUpForm.studentClass2) + '-' + 
                            (this.signUpForm.studentClass3 == '' ?'*':this.signUpForm.studentClass3)
        this.studentId = this.signUpForm.studentId1 + '-' + 
                            (this.signUpForm.studentId2 == '' ?'*':this.signUpForm.studentId2) + '-' + 
                            (this.signUpForm.studentId3 == '' ?'*':this.signUpForm.studentId3)
        this.nickname = (this.signUpForm.nickname1 == '' ?'*':this.signUpForm.nickname1) + '-' + 
                            (this.signUpForm.nickname2 == '' ?'*':this.signUpForm.nickname2) + '-' + 
                            (this.signUpForm.nickname3 == '' ?'*':this.signUpForm.nickname3)
        this.usersName = this.signUpForm.usersName1 + '-' + 
                            (this.signUpForm.usersName2 == '' ?'*':this.signUpForm.usersName2) + '-' + 
                            (this.signUpForm.usersName3 == '' ?'*':this.signUpForm.usersName3)
        this.phoneNumber = this.signUpForm.phoneNumber1 + '-' + 
                            (this.signUpForm.phoneNumber2 == '' ?'*':this.signUpForm.phoneNumber2) + '-' + 
                            (this.signUpForm.phoneNumber3 == '' ?'*':this.signUpForm.phoneNumber3)
        this.size = this.signUpForm.size1 + '-' + 
                            (this.signUpForm.size2 == '' ?'*':this.signUpForm.size2) + '-' + 
                            (this.signUpForm.size3 == '' ?'*':this.signUpForm.size3)
        this.gender = this.signUpForm.gender1 + '-' + 
                            (this.signUpForm.gender2 == '' ?'*':this.signUpForm.gender2) + '-' + 
                            (this.signUpForm.gender3 == '' ?'*':this.signUpForm.gender3)
        let formData = {
            signUpContestId:this.signUpContestId,
            teamName:this.signUpForm.teamName, 
            englishTeamName:this.signUpForm.englishTeamName,
            star:this.signUpForm.star,
            school:this.signUpForm.school,
            teammatesName:this.teammatesName,
            studentClass:this.studentClass,
            studentId:this.studentId,
            nickname:this.nickname,
            usersName:this.usersName,
            phoneNumber:this.phoneNumber,
            size:this.size,
            gender:this.gender
        }
        this.$refs['signUpForm'].validate((valid) => {
        if (valid) {
          this.btnSignUpLoading = true;
          if(this.signStatus==200){
            formData.status = 200
            formData.id = this.teamId
            api.applyForUpdateTeamInfo(formData).then(
                (res) => {
                    this.btnSignUpLoading = false;
                    if(res.data.status==200){
                        mMessage.success(this.$i18n.t('m.Sign_up_Ac_Modify_success'));
                        this.$router.push({
                            name: 'SignUpDetails',
                            params: { signUpID: this.signUpContestId },
                        });
                    }
                }
            )
          }
          else{
            if(this.signStatus===''){
                api.addSignUpInfo(formData).then(
                    (res) => {
                    this.btnSignUpLoading = false;
                    if(res.data.status==200){
                        mMessage.success(this.$i18n.t('m.Sign_up_Success'));
                        this.$router.push({
                            name: 'SignUpDetails',
                            params: { signUpID: this.signUpContestId },
                        });
                    }
                    },
                    (err) =>{
                    this.btnSignUpLoading = false;
                    }
                );
            }
            else{
                formData.status = this.signStatus
                formData.id = this.teamId
                api.putTeamInfo(formData).then(
                    (res)=>{
                        if(res.data.status==200){
                            mMessage.success(this.$i18n.t('m.Sign_up_Modify_Success')); 
                            this.$router.push({
                                name: 'SignUpDetails',
                                params: { signUpID: this.signUpContestId },
                            });
                        }
                    }
                )
            }
          }
        }
      });
    },
    handleModifySignUp(){
        if(this.signStatus===200){
            this.dialogVisible = true
        }
        else{
            this.handleSignUp()
        }
    },
    acModifyApply(){
        if(this.modifyMark==''){
            mMessage.warning(this.$i18n.t('m.Sign_up_Ac_Modify_error'));
        }
        else{
            this.handleSignUp()
            this.dialogVisible = false
        }
    },
    addMember(){
        if(this.memberNum<this.maxParticipants){
            if(this.memberNum===3){
                mMessage.error(this.$i18n.t('m.CanNotAddMember'));
                this.memberNum =3;
            }
            else{
                this.memberNum +=1;
            }
        }else{
            mMessage.error(this.$i18n.t('m.CanNotAddMember'));
        }
    },
    subMember(){
        if(this.memberNum===1){
            // this.$refs.form.clearValidate()
        }
        else{
            this.memberNum -=1;
            if(this.memberNum===2){
                this.signUpForm.teammatesName3=''
                this.signUpForm.studentClass3 = ''
                this.signUpForm.studentId3 = ''
                this.signUpForm.nickname3 = ''
                this.signUpForm.usersName3 = ''
                this.signUpForm.phoneNumber3 = ''
                this.signUpForm.size3 = ''
                this.signUpForm.gender3 =''
            }
            if(this.memberNum===1){
                this.signUpForm.teammatesName2=''
                this.signUpForm.studentClass2 = ''
                this.signUpForm.studentId2 = ''
                this.signUpForm.nickname2 = ''
                this.signUpForm.usersName2 = ''
                this.signUpForm.phoneNumber2 = ''
                this.signUpForm.size2 = ''
                this.signUpForm.gender2 =''
            }
            // this.$refs.form.clearValidate()
        }
    },
    getSignUpState(){
        api.getTeamInfoByUserName(this.signUpContestId).then(
            (res) => {
                if(res.data.status==200){
                    if(res.data.data!=''){
                        let list = res.data.data
                        this.isSignUp=true
                        this.signStatus = list.status
                        this.teamId = list.id
                        this.signUpForm.teamName = list.teamName
                        this.signUpForm.englishTeamName = list.englishTeamName
                        this.signUpForm.star = list.star
                        this.signUpForm.school = list.school
                        this.signUpForm.teammatesName1 = list.teammatesName.split("-")[0]
                        this.signUpForm.teammatesName2 = list.teammatesName.split("-")[1]
                        this.signUpForm.teammatesName3 = list.teammatesName.split("-")[2]
                        this.signUpForm.studentClass1 = list.studentClass.split("-")[0]
                        this.signUpForm.studentClass2 = list.studentClass.split("-")[1]
                        this.signUpForm.studentClass3 = list.studentClass.split("-")[2]
                        this.signUpForm.studentId1 = list.studentId.split("-")[0]
                        this.signUpForm.studentId2 = list.studentId.split("-")[1]
                        this.signUpForm.studentId3 = list.studentId.split("-")[2]
                        this.signUpForm.nickname1 = list.nickname.split("-")[0]
                        this.signUpForm.nickname2 = list.nickname.split("-")[1]
                        this.signUpForm.nickname3 = list.nickname.split("-")[2]
                        this.signUpForm.nickname1 = list.nickname.split("-")[0]=='*'?'':list.nickname.split("-")[0]
                        this.signUpForm.nickname2 = list.nickname.split("-")[1]=='*'?'':list.nickname.split("-")[1]
                        this.signUpForm.nickname3 = list.nickname.split("-")[2]=='*'?'':list.nickname.split("-")[2]
                        this.signUpForm.usersName1 = list.usersName.split("-")[0]
                        this.signUpForm.usersName2 = list.usersName.split("-")[1]
                        this.signUpForm.usersName3 = list.usersName.split("-")[2]
                        this.signUpForm.phoneNumber1 = list.phoneNumber.split("-")[0]
                        this.signUpForm.phoneNumber2 = list.phoneNumber.split("-")[1]
                        this.signUpForm.phoneNumber3 = list.phoneNumber.split("-")[2]
                        this.signUpForm.size1 = list.size.split("-")[0]
                        this.signUpForm.size2 = list.size.split("-")[1]
                        this.signUpForm.size3 = list.size.split("-")[2]
                        this.signUpForm.gender1 = list.gender.split("-")[0]
                        this.signUpForm.gender2 = list.gender.split("-")[1]
                        this.signUpForm.gender3 = list.gender.split("-")[2]
                        if(this.signUpForm.teammatesName2!='*'&&this.signUpForm.teammatesName3=='*'){
                            this.memberNum=2
                        }
                        else if(this.signUpForm.teammatesName3!='*'){
                            this.memberNum=3
                        }
                    }
                }
            },
        )
    },
    handleClose(done) {
        done()
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
    }
  },
  created(){
    this.getSignUpState()
  },
  mounted(){
    this.SIGN_UP_STATUS_REVERSE = Object.assign({}, SIGN_UP_STATUS_REVERSE);
    this.maxParticipants = storage.get('maxParticipants')
  }
}
</script>

<style>
#teamInfo{
    font-size: 1.1rem;
}
#memberInfo{
    font-size: 0.8rem;
}
</style>